<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
<script>
    function loadXMLDoc() {
        console.log(123);
        //发送请求给后端接口，使用后端接口返回的字符串进行内容替换即可
        //创建ajax请求核心对象
        var xmlhttp = new XMLHttpRequest();
        //设置请求的发送方式 参数1：请求的类型，get或post
        //参数2：请求的url 参数3：同步还是异步 true代表同步
        //注意：
        xmlhttp.open("GET", "/hello", true);
        //绑定 回调 函数
        xmlhttp.onreadystatechange = function () {
            //核心对象的状态属性 readyState如果等于4了，说明服务器端已经把结果响应回来了
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //通过xmlhttp.responseText可以获取服务器端返回的字符串数据
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }

        }
        //真正发起请求
        xmlhttp.send();
        //使用js代码局部更新页面内容
        //document.getElementById("myDiv").innerText = "hello ajax";
    }
</script>
</body>
</html>